<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>

    <script>
        // 1.查找元素1个,给的是选择器(字符串)
        // document.querySelector内置的对象,的方法
        const divDom=document.querySelector('div')
        console.log(divDom)
        // 打印dom对象，建议用console.dir
        console.dir(divDom)
        setTimeout(() => {
            // 2.修改元素
            // 改完之后页面会刷新
            divDom.innerHTML='教练，我想打篮球'
        }, 3000);

        // 2.查找多个元素
        // divArr有length属性，有ForEach
        // 但是没有push，filter等数组的其他方法
        // 所以他叫做伪数组，有length属性，通过下标取值
        const divArr=document.querySelectorAll('div')
        console.log(divArr)
        setTimeout(() => {
            // divArr[2].innerHTML='鸡脚'
            divArr.forEach(v=>{
                v.innerHTML='jijiji'
            })
        }, 3000);
    </script>
</body>
</html>